<template>
  <div class="test">
    <div>
      <div
        style="display: inline-block; padding: 10px; width: calc(100% - 600px)"
        :class="'query-form ' + queryFormAllClass"
      >
        <el-form id="search-form" inline>
          <table style="width: 100%;">
            <tr>
              <td>
                <table>
                  <tr>
                    <td width="100" class="search-title">条件筛选：</td>
                    <td>
                      <div ref="query">
                        <span class="query-item">
                          仓库：
                          <el-select
                            v-model="query.warehouseId"
                            filterable
                            no-match-text="没有找到匹配的数据"
                            loading-text="加载中"
                            size="mini"
                            clearable
                            placeholder="选择仓库"
                          >
                            <el-option
                              v-for="(item, index) in warehouseList"
                              :key="index"
                              :label="item.name"
                              :value="item.id"
                            />
                          </el-select>
                        </span>
                        <span class="query-item">
                          配送日期：
                          <el-date-picker
                            v-model="query.deliveryDate"
                            size="mini"
                            type="date"
                            placeholder="选择日期"
                          />
                        </span>
                        <span class="query-item">
                          配送波次：
                          <el-select v-model="query.waveId" clearable size="mini" placeholder="配送波次">
                            <el-option
                              v-for="(item, index) in deliveryWave"
                              :key="index"
                              :label="item.label"
                              :value="item.id"
                            />
                          </el-select>
                        </span>
                      </div>
                    </td>
                  </tr>

                  <tr>
                    <td class="search-title">选择区域：</td>
                    <td>
                      <span
                        v-for="(item, index) in areaList"
                        :key="index"
                        :class="'query-area ' + item.class"
                        @click="handleIsAreaActive(index)"
                      >第一个区域</span>
                    </td>
                  </tr>
                </table>
              </td>
              <td style="vertical-align: top; width: 100px;">
                <el-button icon="el-icon-select" type="primary" style="position: relative; top: -4px;">查询</el-button>
              </td>
            </tr>
          </table>
        </el-form>

        <!--地图占位-->
        <div id="map">
          <my-map />
        </div>
      </div>

      <div class="right-list" style="display: inline-block; width: 600px; vertical-align: top;">
        <!--搜索框-->
        <right-search />

        <!--列表开始-->
        <right-tabs />
      </div>
    </div>
  </div>
</template>

<script>

import MyMap from './components/map/MyMap'
import RightSearch from './components/rightList/RightSearch'
import RightTabs from './components/rightList/RightTabs'

export default {
  name: 'ComplexTable',
  components: {
    MyMap,
    RightSearch,
    RightTabs
  },
  data() {
    return {
      activeName: 'first',
      visible: false,
      query: {},
      warehouseList: [
        {
          id: 1,
          name: '测试1'
        }
      ],
      deliveryWave: [
        {
          id: 1,
          label: '上午'
        },
        {
          id: 2,
          label: '下午'
        }
      ],
      options: [{
        value: 1,
        label: '区域1'
      }, {
        value: 2,
        label: '区域1'
      }, {
        value: 3,
        label: '区域1'
      }, {
        value: 4,
        label: '区域1'
      }, {
        value: 5,
        label: '区域1'
      }],
      options1: [{
        value: 1,
        label: '线路1'
      }, {
        value: 2,
        label: '线路1'
      }, {
        value: 3,
        label: '线路1'
      }, {
        value: 4,
        label: '线路1'
      }, {
        value: 5,
        label: '线路1'
      }],
      deliveryBatchList: [
        {}
      ],
      deliveryWaveList: [
        {}
      ],
      classList: [
        {}
      ],
      orderOriginList: [
        {}
      ],
      consignorList: [
        {}
      ],

      areaList: [
        {
          id: 1,
          name: '第一个区域',
          class: 'active'
        },
        {
          id: 2,
          name: '第二个区域'
        },
        {
          id: 2,
          name: '第二个区域'
        },
        {
          id: 2,
          name: '第二个区域'
        },
        {
          id: 2,
          name: '第二个区域'
        },
        {
          id: 2,
          name: '第二个区域'
        },
        {
          id: 2,
          name: '第二个区域'
        },
        {
          id: 2,
          name: '第二个区域'
        },
        {
          id: 2,
          name: '第二个区域'
        },
        {
          id: 2,
          name: '第二个区域'
        }
      ],

      isShowAll: true,
      isShowAllText: '收起',
      queryFormAllClass: 'query-form-all',

      isAreaActive: false,
      codeList1: [
        {
          id: 1,
          visible: false
        },
        {
          id: 2,
          visible: false
        },
        {
          id: 3,
          visible: false
        },
        {
          id: 4,
          visible: false
        }
      ],

      queryData: {
        infoId: '',
        classId: ''
      },

      searchVals: [{}]
    }
  },
  created() {

  },
  mounted() {
    this.comMapHeight()
    if (!this.isShowAll) {
      this.computeQueryNum()
    }
    window.onresize = (e) => {
      this.comMapHeight()
      if (!this.isShowAll) {
        this.computeQueryNum()
      }
    }
  },
  updated() {
    // console.log(this.codeList)
  },
  methods: {
    /**
     * 切换右侧列表的tabs
     */
    handleClick() {

    },

    /**
     * 计算地图区域的高度
     */
    comMapHeight() {
      const searchFormHeight = document.getElementById('search-form').clientHeight
      const mapHeight = document.documentElement.clientHeight - searchFormHeight - 24
      document.getElementById('map').style.height = mapHeight + 'px'
    },

    /**
     * 处理选中的区域
     */
    handleIsAreaActive(index) {
      this.areaList.forEach((item, i) => {
        if (index === i) {
          this.$set(item, 'class', 'active')
        } else {
          this.$set(item, 'class', '')
        }
      })
    }
  }
}
</script>

<style lang="scss">
#search-form {
  font-size: 14px;
  background: #eee;
  border-radius: 5px;
  padding: 10px;
  margin-bottom: 10px;
}

.query-item {
  display: inline-block;
  margin-right: 10px;
  margin-bottom: 10px;
}

.query-show-all-btn {
  color: blue;
  cursor: pointer;
}

.query-form-all {
  height: 56px;
}

.search-title {
  vertical-align: top;
  padding-top: 5px;
}

.query-area {
  display: inline-block;
  margin-right: 5px;
  padding: 5px 10px;
  cursor: pointer;
}

.query-area.active {
  background-color: rgba(0, 69, 132, 0.5);
  color: #fff;
  border-radius: 3px;
}

.right-list {
  height: 100vh;
  padding: 10px;
  font-size: 14px;
  overflow-y: auto;
  border-left: 1px solid #ccc;
}

.right-content-list-item {
  margin-top: 10px;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
  padding-left: 35px;
  position: relative;
  height: 120px;

  .list-item-num {
    font-weight: bold;
    position: absolute;
    left: 0;
    font-size: 1.3em;
    background-color: #eee;
    padding: 3px 5px;
    border-radius: 3px;
  }

  .list-item-title {
    font-weight: bold;
    font-size: 1.3em;
    margin-bottom: 5px;
  }

  .list-item-icon {
    position: absolute;
    right: 0;
    top: 0;

    .icon-item {
      padding: 5px;
      margin-bottom: 5px;
      text-align: center;
      cursor: pointer;
    }
  }
}
</style>
